<template>
  <div class="home">
    <swiper
      class="swiper"
      :options="swiperOption"
      @slideChange="onSlideChange"
      ref="mySwiper"
    >
      <swiper-slide v-for="item in imgList" :key="item.src">
        <img :src="item.src" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import "swiper/swiper.css";

export default {
  name: "Home",
  data() {
    return {
      swiperOption: {
        autoplay: true,//可选选项，自动滑动
        pagination: {
          el: '.swiper-pagination',
        }
      },
      imgList: [
        {src: require('@/assets/images/index/banner/960_360/20151111235240_5083.jpg')},
        {src: require('@/assets/images/index/banner/960_360/20151130101354_3821.jpg')},
        {src: require('@/assets/images/index/banner/960_360/20151205114524_7652.jpg')},
        {src: require('@/assets/images/index/banner/960_360/20151207174118_3134.jpg')},
        {src: require('@/assets/images/index/banner/960_360/20151209091812_5096.jpg')},
        {src: require('@/assets/images/index/banner/960_360/20151210181614_1383.jpg')}
      ]
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    onSlideChange() {
      console.log("onSlideChange");
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  .swiper {
    min-width: 320px;
    max-width: 960px;
    width: 100%;
    height: auto;
    min-height: 120px;
    max-height: 360px;
    .swiper-slide img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
